<template>
  <div class="">
    <!-- 地名空间查询 -->
    <PagePanel :panelTitle="activePanel.panelTitle" @clickClose="clickClose">
      <el-card class="box-card">
        <!-- 提示：地图上点击建筑，查看建筑信息、关联的门牌信息。 -->
        提示：地图上点击图标，查看地点相关信息。
      </el-card>
      <el-card style="margin-top: 10px" class="box-card">
        <div slot="header" class="clearfix">
          <span>地名信息</span>
        </div>
        <div
          v-for="(item, index) in addressInfoName"
          :key="index"
          class="text item"
        >
          <span style="font-size: 14px; font-weight: 700; color: #2d7ad6">{{
            item.value
          }}</span>
          :{{ addressInfo[item.name] }}
        </div>
      </el-card>
    </PagePanel>
  </div>
</template>

<script>
import PagePanel from "@/components/PagePanel";
// import markerImg from "../../../assets/img/address.png";
import markerImg from "../../../assets/img/addressNameSpace.png";
import { findAddressInfo, getAddressAll } from "@/api/home.js";
//图标集合
let billboards = null;
export default {
  name: "AreaNameSpaceSearch",
  components: { PagePanel },
  data() {
    return {
      handler: null,
      addressInfo: {},
      addressInfoName: [
        { name: "BiaoZhunMin", value: "标准名" },
        { name: "LiShiYanGe", value: "历史由来" },
        { name: "DongJing", value: "东经" },
        { name: "BeiWei", value: "北纬" },
        { name: "ZuoBiaoXi", value: "坐标系" },
        { name: "CeLiangFang", value: "测量法" },
        { name: "DiLiShiTi", value: "地理位置" },
        { name: "ZiLiaoLaiYu", value: "调查" },
        { name: "DengJiRen", value: "登记人" },
        { name: "DengJiShiJi", value: "登记时间" },
        { name: "DengJiDanWe", value: "登记单位" },
        { name: "LuRuShiJian", value: "录入时间" },
        { name: "DiMingHanYi", value: "地名含义" },
        { name: "DiMingLaiLi", value: "地名来历" },
      ],
    };
  },
  computed: {
    activePanel() {
      return this.$store.state.activePanel;
    },
  },
  mounted() {
    this.setCamera();
    this.areaNameSpaceSpread();
    this.leftClickAddress();
  },
  methods: {
    setCamera() {
      // const position = Cesium.Cartesian3.fromDegrees(
      //   113.3145777946819,
      //   29.30252009639984,
      //   1125.4173591032336
      // );
      const position = Cesium.Cartesian3.fromRadians(1.9773929851653564, 0.5121776725857636, 128346.34542412325);
      cesiumViewer.camera.flyTo({
        destination: position, // 相机位置
        orientation: {
          heading: 0.02087889658803377, // 6.28318530717958, // 水平旋转  -正北方向
          pitch: -1.56164675629031, // -1.568971553888797, // 上下旋转  --俯视朝向
          roll: 0, // 视口翻滚角度
        },
      });
    },
    leftClickAddress() {
      this.handler = new Cesium.ScreenSpaceEventHandler(cesiumViewer.canvas); //获取地图对象
      this.handler.setInputAction((e) => {
        const pick = cesiumViewer.scene.pick(e.position);
        // if (pick && pick?.id) {
        //   alert(JSON.stringfy(pick.properties));
        // }
        if (pick && pick?.primitive) {
          if (pick.primitive.properties.BiaoZhunMin) {
            // alert(pick.primitive.properties.BiaoZhunMin)
            const id = pick.primitive.properties.ID;
            findAddressInfo(id).then((response) => {
              this.addressInfo = JSON.parse(response.data);

              this.addressInfo.DongJing =
                Number(this.addressInfo.DongJing) / 10000;
              this.addressInfo.BeiWei = Number(this.addressInfo.BeiWei) / 10000;

              console.log(this.addressInfo);
            });
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      //鼠标经过显示名称
      this.handler.setInputAction((e) => {
        cesiumViewer.entities.removeById("addressLabel");
        const pick = cesiumViewer.scene.pick(e.endPosition);
        if (pick && pick.primitive) {
          cesiumViewer.entities.add({
            id: "addressLabel",
            position: pick.primitive.position,
            label: {
              font: "20px Helvetica", //设置文字大小和字体
              text: pick.primitive.properties.BiaoZhunMin,
              pixelOffset: new Cesium.Cartesian2(0, -90),
            },
          });
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
    // 地名空间分布
    async areaNameSpaceSpread() {
      const res = await getAddressAll();
      if (res.code === 20000 && res.data !== 0) {
        const info = JSON.parse(res.data);
        // this.addBillboard();
        this.addBillboards(info);
      }
    },
    /**
     * 以primitive方式加载
     * @param {*} info
     */
    addBillboards(info) {
      const features = [];
      info.map((item) => {
        const feature = {
          properties: item,
          coordinates: [
            Number(item.DongJing) / 10000,
            Number(item.BeiWei) / 10000,
          ],
        };
        features.push(feature);
      });

      billboards = cesiumViewer.scene.primitives.add(
        new Cesium.BillboardCollection()
      );

      let feature, coordinates, position;
      for (let i = 0; i < features.length; i++) {
        feature = features[i];
        coordinates = feature.coordinates;
        position = Cesium.Cartesian3.fromDegrees(
          coordinates[0],
          coordinates[1],
          0
        );
        // pointCollection.add({
        //     position : Cesium.Cartesian3.fromDegrees(longitude, latitude),
        //     color : color
        // });
        const b = billboards.add({
          id: feature.properties.id,
          width: 80,
          height: 80,
          position: position,
          image: markerImg,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // data: { community, gridsMini, housingEstate, lat, lng, structure },
          properties: feature.properties,
          // scaleByDistance
          // translucencyByDistance = new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 0.0);
        });
        b.properties = feature.properties;
      }
      // cesiumViewer.zoomTo(billboards);
    },
    //添加广告牌
    addBillboard(position) {
      //position为cartsian3
      cesiumViewer.entities.add({
        position: position, // Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
        billboard: {
          image: markerImg,
          sizeInMeters: true,
          scale: 0.1,
          show: true,
          width: 100,
          height: 100,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            0,
            6.8e10
          ),
        },
      });
    },
    removeClick() {
      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      this.handler.destroy();
    },
    clickClose() {
      console.log("@@@@@@@@@@@@", this.activePanel);
    },
  },
  beforeDestroy() {
    cesiumViewer.entities.removeById("addressLabel");
    cesiumViewer.scene.primitives.remove(billboards);
    billboards = null;
    this.removeClick();
    //因为面板都是用的v-if，会销毁面板，需要销毁的事件也可以写这里
  },
};
</script>
<style lang="less" scoped></style>
